<template>
  <div class="userConfig">
    <div class="header">
      <div class="avatar">
        <div class="imgWrap">
          <img src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg" alt="">
<!--          <div class="icon"><CameraOutlined/></div>-->
        </div>
        <div class="userName">{{getUserInfo.realname}}</div>
      </div>
      <div class="userInfo">
        <div class="infoDesc"><div class="icon"><PersonOutline/></div><div class="text">{{getUserInfo.roleName}}</div></div>
        <div class="infoDesc"><div class="icon"><HomeOutline/></div><div class="text">{{getUserInfo.deptName}}</div></div>
<!--        <div class="local"><div class="icon"><PersonOutline/></div><div class="text">{{getUserInfo.roleName}}</div></div>-->
      </div>
    </div>
    <div class="configWrap">
      <n-tabs type="line" animated>
        <n-tab-pane name="passwordConfig" tab="安全设置">
          <password-setting></password-setting>
        </n-tab-pane>
      </n-tabs>
    </div>
  </div>
</template>

<script setup>
import { CameraOutlined } from '@vicons/antd'
import { PersonOutline, HomeOutline } from '@vicons/ionicons5'
import PasswordSetting from '@/views/user-center/user-config/components/passwordSetting.vue'
import { computed } from 'vue'
import { useUserStore } from '@/store/modules/user'
const userStore = useUserStore()
const getUserInfo = computed(() => {
  return {
    hasLogin: userStore.hasLogin,
    // avatar: userStore.avatar,
    username: userStore.username,
    realname: userStore.realname,
    roleName: userStore.roleName,
    deptName: userStore.deptName
  }
})
</script>

<style scoped lang="scss">
.userConfig{
  .header{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 35px 0;
    background: #E8F4FF;
    .avatar{
      .imgWrap{
        width: 80px;
        height: 80px;
        position: relative;
        img{
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
        .icon{
          color: #165DFF;
          background: #fff;
          padding: 4px;
          border-radius: 50%;
          position: absolute;
          line-height: 0;
          right: 0;
          bottom: 0;
          cursor: pointer;
          svg{
            width: 20px;
          }
        }
      }
      .userName{
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        margin-top: 10px;
      }
    }
    .userInfo{
      height: 40px;
      width: 100%;
      display: flex;
      justify-content: center;
      .infoDesc{
        display: flex;
        justify-content: space-between;
        line-height: 40px;
        font-size: 16px;
        margin-right: 20px;
      }
      .icon{
        font-weight: bold;
        width: 16px;
        height: 16px;
        line-height: 42px;
        margin-right: 10px;
      }
    }
  }
  .configWrap{
    background: #1D202F;
    padding: 20px;
    margin-top: 20px;
  }
}
</style>
